{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>萌宠之家</title>
    <link href="{% static 'pet/bootstrap5/css/bootstrap.min.css' %}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="{% static 'pet/layui/css/layui.css' %}">
    <style>
        .nav {
            background-color: #CC9999;
            height: 64px;
            padding: 0 125px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .nav-menu {
            margin-left: -200px;
            font-size: 18px;
            background-color: #CC9999;
        }

        .nav-menu a {
            font-size: 18px;
        }

        .layui-nav .layui-this:after, .layui-nav-bar {
            height: 3px;
            background-color: #0dcaf0;
        }

        .menu div {
            margin: 0 12px;
            color: white;
        }

        .info {
            display: flex;
        }

        .info div {
            margin: 0 8px;
            color: white;
        }

        .logo {
            margin-left: 30px;
            height: 64px;
            width: 30px;
        }

        .banner-box {
            height: 450px;
            width: 100%;
            margin: 0 auto;
        }

        .banner-box .banner {
            width: 100% !important;
            height: 100% !important;
        }

        .layer {
            padding: 20px;
            align-items: flex-start;
            display: none;
        }

    </style>
</head>
<body>
<div class="nav">
    <div class="logo">
        <img src="{% static 'pet/image/logo.png' %}" height="64">
    </div>
{#    导航栏#}
    <ul class="layui-nav nav-menu" lay-filter="">
        <li class="layui-nav-item layui-this"><a href="http://127.0.0.1:8000/pet/index">首页</a></li>
        <li class="layui-nav-item "><a href="http://127.0.0.1:8000/pet/cat">猫猫百科</a></li>
        <li class="layui-nav-item"><a href="http://127.0.0.1:8000/pet/dog">狗狗百科</a></li>
        <li class="layui-nav-item"><a href="http://127.0.0.1:8000/pet/pet">鼠鼠百科</a></li>
    </ul>
    <div class="info">
    </div>
</div>
{#轮播图#}
<div class="banner-box">
    <div class="layui-carousel banner" id="test1">
        <div carousel-item>
            <div style="background-image: url({% static 'pet/image/1Xbuou.jpg' %});width: 100%">
                <img src="{% static 'pet/image/1buou.jpeg' %}"
                     style="width: 80%;height: 100%;object-fit: cover;margin-left: 10%">
            </div>
            <div style="background-image: url({% static 'pet/image/2Xjjc.jpg' %});width: 100%">
                <img src="{% static 'pet/image/2jjc.jpeg' %}"
                     style="width: 80%;height: 100%;object-fit: cover;margin-left: 10%">
            </div>
            <div style="background-image: url({% static 'pet/image/3Xbomei.jpg' %});width: 100%">
                <img src="{% static 'pet/image/3bomei.jpeg' %}"
                     style="width: 80%;height: 100%;object-fit: cover;margin-left: 10%">
            </div>
            <div style="background-image: url({% static 'pet/image/4Xkeji.jpg' %});width: 100%">
                <img src="{% static 'pet/image/4keji.jpeg' %}"
                     style="width: 80%;height: 100%;object-fit: cover;margin-left: 10%">
            </div>
            <div style="background-image: url({% static 'pet/image/5Xcangshu.jpg' %});width: 100%">
                <img src="{% static 'pet/image/5cangshu.jpg' %}"
                     style="width: 80%;height: 100%;object-fit: cover;margin-left: 10%">
            </div>
        </div>
    </div>
</div>

{#图片内容#}
<div class="content" style="width: 100%">
    <div id="contentBox" style="width: 1224px;height: 100%;margin: 40px auto;display: flex;flex-wrap: wrap">
        {% for item in cat_list %}
            <div id="{{ forloop.counter }}" style="width: 286px;height: 176px;position: relative;
                    background-image: url({% static item.picture %});background-size: cover;margin-bottom: 20px;margin-right: 10px;margin-left: 10px;border-radius: 4px;padding: 15px">
                <div>
                    <span class="layui-badge layui-bg-black">猫猫百科</span>
                </div>
                <div style="position: absolute;top: 136px;left: 0;background-color: rgba(0,0,0,0.3);width: 286px;height: 40px;color: white;line-height: 40px;text-align: center">{{ item.name }}
                </div>
            </div>
        {% endfor %}
            {% for item in dog_list %}
            <div id="{{ forloop.counter }}" style="width: 286px;height: 176px;position: relative;
                    background-image: url({% static item.picture %});background-size: cover;margin-bottom: 20px;margin-right: 10px;margin-left: 10px;border-radius: 4px;padding: 15px">
                <div>
                    <span class="layui-badge layui-bg-black">狗狗百科</span>
                </div>
                <div style="position: absolute;top: 136px;left: 0;background-color: rgba(0,0,0,0.3);width: 286px;height: 40px;color: white;line-height: 40px;text-align: center">{{ item.name }}
                </div>
            </div>
        {% endfor %}
        {% for item in mouse_list %}
            <div id="{{ forloop.counter }}" style="width: 286px;height: 176px;position: relative;
                    background-image: url({% static item.picture %});background-size: cover;margin-bottom: 20px;margin-right: 10px;margin-left: 10px;border-radius: 4px;padding: 15px">
                <div>
                    <span class="layui-badge layui-bg-black">鼠鼠百科</span>
                </div>
                <div style="position: absolute;top: 136px;left: 0;background-color: rgba(0,0,0,0.3);width: 286px;height: 40px;color: white;line-height: 40px;text-align: center">{{ item.name }}
                </div>
            </div>
        {% endfor %}
    </div>
</div>

{#弹窗#}
<div id="layer" class="layer">
    <div class="image" style="width: 286px;height: 176px;margin-right: 20px">
        <img id="layerImage"
             style="width: 286px;height: 176px;object-fit: cover;object-position: top">
    </div>
    <div class="content">
        <div style="display:flex;margin-bottom: 10px">
            <div style="width: 200px">别名：<span id="alias"></span></div>
            <div>原产地：<span id="origin"></span></div>
        </div>
        <div style="display: flex">
            <div style="width: 200px;margin-bottom: 10px">寿命：<span id="lifetime"></span></div>
            <div>价格：<span id="price"></span></div>
        </div>
        <div>生活习性：<span id="habit" style="line-height: 24px"></span>
        </div>
    </div>
</div>

<script src="{% static 'pet/layui/layui.js' %}">
    <script src="{% static 'pet/bootstrap5/js/bootstrap.bundle.min.js' %}"></script>
<script>
    layui.use('element', function () {
        let element = layui.element;

    });
    layui.use('carousel', function () {
        let carousel = layui.carousel;
        carousel.render({
            elem: '#test1',
            width: '100%',
            arrow: 'always'
        });
    });
    let contentBox = document.getElementById('contentBox')

    {#点击图片进行的操作#}
    const toDetail = function (e) {
        let cat_list = {{ cat_list|safe }};
        let imgSrc = cat_list[e.target.id - 1].picture
        const layerD = document.getElementById('layer')
        layerD.style.display = 'flex'
        {#dom操作，往弹窗里添加信息#}
        document.getElementById('layerImage').src = '{% static '' %}' + imgSrc
        document.getElementById('alias').innerText = cat_list[e.target.id - 1].another_name
        document.getElementById('origin').innerText = cat_list[e.target.id - 1].area_of_origin
        document.getElementById('lifetime').innerText = cat_list[e.target.id - 1].lifetime
        document.getElementById('price').innerText = cat_list[e.target.id - 1].price
        document.getElementById('habit').innerText = cat_list[e.target.id - 1].habit
        layui.use('layer', function () {
            let $ = layui.$
            let layer = layui.layer;
            layer.open({
                type: 1,
                area: '900px',
                title: [cat_list[e.target.id - 1].name, 'font-size:21px;margin-top:10px'],
                content: $('#layer'),
                end: function () {
                    layerD.style.display = 'none'
                }
            });
        });
    }
    contentBox.addEventListener("click", toDetail)
</script>
</body>
</html>